<template>
   <div id="club">
     <div class="club-bg"></div>
     <div class="club-card">
      <div class="club-card-word1">
        <i class="iconfont icon-anniu-jiantouxiangyou"></i>
        <span>Sams 山姆会员商店</span>
      </div>
      <div class="club-card-word2">
        {{ status ? '欢迎登录' : `普通会员`}}
      </div>
      <div class="club-card-word3">
        全球
        <span>5000</span>
        万会员的共同品质选择
      </div>
      <div class="club-card-logo">
        <div>
          <span>
          Sams's
          CLUB
        </span>
        </div>
      </div>
     </div>
   </div>
   
</template>
<script>
export default {
   name: 'SamClub',
   components: {
     
   },
   mixins: [],
   props: {
     
   },
   data() {
     return {
       status:""
     }
   },
   mounted(){
    const user = localStorage.getItem('status')
    if(user){
      this.status = user
    }
  }
};
</script>
<style lang='less' scoped>
  #club{
    color: black;
    .club-bg{
      width: 37.5rem;
      height: 35rem;
      background-color: rgb(45, 35, 91);
      border-bottom-left-radius: 2rem;
      border-bottom-right-radius: 2rem;
    }
    .club-card{
      position: absolute;
      width: 29.5rem;
      height: 9rem;
      background-color: skyblue;
      border-radius: 1rem;
      top: 7rem;
      left: 1rem;
      padding: 3rem;
      .club-card-word1{
        font-size: 1rem;
      }
      .club-card-word2{
        font-size: 3rem;
        font-weight: bold;
      }
      .club-card-word3{
        font-size: 1.5rem;
        margin-top: 2rem;
      }
      .club-card-logo{
        width: 6rem;
        height: 6rem;
        background-color: gray;
        transform: rotate(45deg);
        padding: 1rem;
        position: absolute;
        right: 4rem;
        top: 1rem;
        color: rgba(246, 246, 249, 0.693);
        font-weight: bold;
        div{
          transform: rotate(-45deg);
        }
      }
      
    }
  }
</style>